<template>
    <div class="table-header">
        <div class="header-box" v-for="(d, didx) in itm.titleList" :key="didx">
            <div class="title-boxs" v-if="d.levelList">
                <div class="name">{{ d.levelName }}</div>
                <div class="info" v-if="d.levelList">
                    <div v-for="(dchildrem, dchildremidx) in d.levelList" :key="dchildremidx">
                        {{ dchildrem.levelName }}
                    </div>
                </div>
            </div>
            <div class="title-box" v-if="!d.levelList">
                {{ d.levelName }}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: ['itm'],
    data() {
        return {

        }
    },
    mounted() {

    },
    computed: {

    },
    methods: {

    },
}
</script>
<style scoped lang="less">
.two-batch-table {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.table-header {
    height: 3.3125rem;
    display: flex;
    margin-bottom: 0.9375rem;

    .header-box {
        flex: 0 0 18.75rem;
        height: 3.3125rem;
        display: flex;
        font-size: 0.875rem;
    }

    .title-box {
        text-align: center;
        line-height: 3.3125rem;
        flex: 1;
        border: 1px solid #b6b6b6;
    }

    .title-boxs {
        text-align: center;
        display: flex;
        flex-direction: column;
        flex: 1;
        border: 1px solid #b6b6b6;

        .name {
            border-bottom: 1px solid #b6b6b6;
        }

        .info {
            flex: 1;
            display: flex;

            div {
                white-space: nowrap;
                padding: 0 0.625rem;
                display: flex;
                justify-content: center;
                align-items: center;
                flex: 1;
                border-right: 1px solid #b6b6b6;
            }

            :last-child {
                border-right: none;
            }
        }
    }
}
</style>
